<script setup lang="ts">
import { allergicHistoryOptions, fertilityStatusOptions, liverFunctionOptions, renalFunctionOptions } from "@/constants";
import { reactive } from "vue";

const illnessInfo=reactive({
    liverFunction:undefined, // 肝功能0正常1异常2不清楚
    renalFunction:undefined, // 肾功能0正常1异常2不清楚
    fertilityStatus:undefined, // 生育状态及计划0无1备孕中2已怀孕3哺乳期
    allergicHistory:undefined, // 过敏史0无1有2不清楚
    illnessDesc:"" // 症状描述
})
</script>

<template>
    <div class="medicine">
        <nav-bar title="开药门诊" right-text="问诊记录" left-arrow left-text="返回" @click-left="$router.back()" @click-right="$router.push('/consultRecord')"></nav-bar>
        <van-notice-bar text="请如实填写资料以便医生了解您的病情和用药需求" />
        <div class="illness-form">
            <div class="adm-list-header">症状描述</div>
            <van-field type="textarea" rows="3" placeholder="请输入所患疾病名称" v-model="illnessInfo.illnessDesc"></van-field>
            <div class="adm-list-header">用药人身体情况</div>
            <div class="item">
                <p>肝功能</p>
                <radio :options="liverFunctionOptions" v-model="illnessInfo.liverFunction"></radio>
            </div>
            <div class="item">
                <p>肾功能</p>
                <radio :options="renalFunctionOptions" v-model="illnessInfo.renalFunction"></radio>
            </div>
            <div class="item">
                <p>过敏史</p>
                <radio :options="allergicHistoryOptions" v-model="illnessInfo.allergicHistory"></radio>
            </div>
            <div class="item">
                <p>生育状态及计划</p>
                <radio :options="fertilityStatusOptions" v-model="illnessInfo.fertilityStatus"></radio>
            </div>
            <div class="adm-list-header">补充病例信息</div>
            <!-- 上传组件 -->
            <div class="item">
                <van-uploader></van-uploader>
            </div>
            <van-button type="primary" block round> 下一步</van-button>
        </div>
    </div>
</template>

<style scoped lang="scss">
.medicine {

    .van-button {
        font-size: 16px;
        margin-bottom: 30px;

        &.disabled {
            opacity: 1;
            background: #fafafa;
            color: #d9dbde;
            border: #fafafa;
        }
    }

    .illness-form {
        padding: 0 15px 15px 15px;

        .adm-list-header {
            padding-bottom: 5px;
            font-size: 16px;
            font-weight: 500;
            color: #121826;
            border-bottom: none;
            margin-top: 30px;
        }

        .van-field {
            padding: 0;

            &::after {
                border-bottom: none;
            }
        }

        .item {
            margin-bottom: 10px;
            > p {
                color: var(--cp-text3);
                padding: 15px 0;
            }
        }
    }
}
</style>

